<template>
    <f7-sheet :opened="sheetOpened" :backdrop="true" @sheet:closed="close">
        <f7-toolbar>
            <div class="left">{{title}}</div>
            <div class="right">
	            <f7-link @click="close">关闭</f7-link>
	        </div>
        </f7-toolbar>
        <div class="page-content stop-scrolling">
	        <div class="block h100" style="margin-top:5px; padding-left:1px; padding-right:1px;">
		        <f7-row class="h100">
		            <f7-col class="h100" v-for="i in maxLevel" :key="i - 1" :width="width(i - 1)">
					    <f7-list class="scrolling" style="margin-top:5px; margin-bottom:5px;"
                            :style="{'fontSize': fontSize + 'px'}">
					        <f7-list-item v-for="(option, j) in cols[i - 1]" link="#" no-chevron
					            :key="option.value" :title="option.displayValue"
					            :style="{'backgroundColor': currentOptions[i - 1] != null && option.value == currentOptions[i - 1].value ? 'rgb(170, 180, 185)' : 'rgb(207, 213, 218)'}"
					            @click="setOption(i - 1, option)">
					        </f7-list-item>
					    </f7-list>
		            </f7-col>
		        </f7-row>
	        </div>
        </div>
    </f7-sheet>
</template>

<script>
import Common from "@/utils/Common.js";
import DateUtil from "@/utils/DateUtil.js";
import $ from 'jquery';
import events from 'events';

export default {
    props: {
    	options: {
    		type: Array,
    		default: function() {
    			return [];
    		}
    	},
    	value: {
    		type: Array,
    		default: function() {
    			return [];
    		}
    	},
    	fontSize: {
    		type: Number,
    		default: 12
    	},
        widths: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    data: function() {
        return {
        	sheetOpened: false,
        	maxLevel: 0,
        	optionMap: null,
        	cols: [],
        	currentOptions: []
        };
    },
    methods: {
    	open: function() {
    		this.sheetOpened = true;
    	},
    	close: function() {
    		this.sheetOpened = false;
    	},
        width: function(colIndex) {
        	if(this.widths.length > colIndex) {
        		return this.widths[colIndex];
        	} else {
        		var remainLevel = this.maxLevel - this.widths.length;
        		var remainWidth = 100;
        		this.widths.forEach(function(width) {
        			remainWidth -= width;
        		});
        		return parseInt(remainWidth / remainLevel);
        	}
        },
        setOption: function(colIndex, option) {
        	this.currentOptions.splice(colIndex);
        	this.currentOptions.push(option);
        	for(var i = colIndex + 1; i < this.maxLevel; i++) {
        		this.cols.splice(i, 1, []);
        	}
        	if(option.children.length == 0) {
        		this.$emit('change', this.currentOptions.map(function(option) {
        			return option.value;
        		}));
        	} else {
        		this.cols.splice(colIndex + 1, 1, option.children);
        	}
        },
    	initOptions: function() {
            var queue = [];
            this.optionMap = {};
            for(var i = 0; i < this.options.length; i++) {
                var option = this.options[i];
                option.level = 1;
                this.optionMap[option.value] = option;
                queue.push(option);
            }
            var maxLevel = 0
            while(queue.length > 0) {
                var option = queue.pop();
                option.childMap = {};
                for(var i = 0; option.children && i < option.children.length; i++) {
                	var child = option.children[i];
                	child.level = option.level + 1;
                	option.childMap[child.value] = child;
                    queue.push(child);
                }
                maxLevel = option.level;
            }
            this.maxLevel = maxLevel;
            var cols = [];
            for(var i = 0; i < maxLevel; i++) {
            	cols.push([]);
            }
            cols[0] = this.options;
            this.cols = cols;
            this.currentOptions = [];
    	},
    	initValue: function() {
    		var currentOptions = [];
            var option = null;
    		for(var i = 0; i < this.value.length; i++) {
    			var val = this.value[i];
    			if(i == 0) {
    				option = this.optionMap[val];
    			} else {
    				option = option.childMap[val];
    			}
    			if(option == null) {
    				break;
    			} else {
    				currentOptions.push(option);
    				if(i < this.value.length - 1) {
    					this.cols.splice(i + 1, 1, option.children);
    				}
    			}
    		}
    		this.currentOptions = currentOptions;
    	}
    },
    computed: {
    	title: function() {
    		var self = this;
    		var displayValues = [];
    		var option = null;
    		for(var i = 0; i < this.currentOptions.length; i++) {
    			var option = this.currentOptions[i];
    			displayValues.push(option.displayValue);
    		}
    		return displayValues.join(" > ");
    	}
    },
    watch: {
    	'options': function(newVal, oldVal) {
    		this.initOptions();
    	},
    	'value': function(newVal, oldVal) {
    		this.initValue();
    	}
    },
    created: function() {
    	this.initOptions();
    	this.initValue();
    },
    mounted: function() {
    	
    }
}
</script>

<style scoped>
.stop-scrolling{
	overflow: visible !important;
	height: 100%;
}
.scrolling{
	overflow: auto !important;
	height: 100%;
}
.h100{
	height: 100%
}
ul::-webkit-scrollbar {
  	width: 0;
}
 div::-webkit-scrollbar {
   	width: 0;
 }
</style>
